<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>model</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-24 -->
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
			font-size: 12px;
		}
		body {
			padding : 40px;
		}
		.topicList {
			width: 300px;
			border: 1px solid #999;
		}
		.topicList li {
			list-style: none;
			padding: 8px 0px;
			margin-left: 10px;
			border-bottom: 1px dotted #aaa;
		}
		.topicList ul {
			display: none;
		}
		.topicList h3 {
			height: 35px;
			background: #347;
			color: #fff;
			border-bottom： 1px solid #fff;
			cursor: pointer;
		}
		.topicList h3 span {
			position: relative;
			left: 15px;
			top: 10px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			// $(".topicList h3").click(function() {
				// var uln = $(this).next("ul");
				// if(uln.css("display") == "none") {
					// uln.css("display","block");
				// } else {
					// uln.css("display","none");
				// }
			// });
			
			// $(".topicList h3").toggle(function() {
				// $(this).next("ul").css("display","block");
			// },function(){
				// $(this).next("ul").css("display","none");
			// });
			
			/**
			 * 可以使用jQuery所提供的show和hide来完成带缓动的隐藏和显示效果
			 * 由于两个方法比较类似，可以直接使用toggle来完成操作
			 */
			// $(".topicList h3").toggle(function() {
				// $(this).next("ul").show(800);
			// },function(){
				// $(this).next("ul").hide(800);
			// });
			
			/**
			 * toggle如果有两个参数，并且都是函数，表示第一次点击点击执行第一个函数
			 * 第二次点击执行第二个函数
			 */
			$(".topicList h3").toggle(topicHandler,topicHandler);
			
			function topicHandler() {
				// 使用fade,show,slideDown可以完成某个容器的显示
				// 使用fadeOut,hide,slideUp可以完成某个容器的隐藏
				// 所以可以通过各个toggle来完成两个之间的轮换
				$(this).next("ul").slideToggle(1000);
			}
		});
	</script> 
</head>
<body>
	<div class="topicList">
		<h3><span>学习天地</span></h3>
		<ul>
			<li>关于谢阿斯顿撒打算打我阿斯顿撒</li>
			<li>关于谢阿斯顿撒打创新政策性支持</li>
			<li>关于谢阿斯顿撒打算从V型注册v打</li>
			<li>关于谢阿斯顿撒打算打是的撒我v</li>
			<li>关于谢阿斯顿撒打 程序做出选择算</li>
			<li>关于谢阿斯顿撒打算打规范化股份</li>
			<li>关于谢阿斯顿撒打算打其味无穷二</li>
			<li>关于谢阿斯顿撒从自行车打算打我</li>
			<li>关于谢阿斯顿撒打算个非官方的打</li>
			<li>关于谢阿斯顿撒打范德萨范德萨算</li>
		</ul>
	</div>
</body>
</html>

